import React, { useState, useEffect } from 'react'
import { BrowserRouter as Router, Route, Routes, useNavigate, useLocation } from 'react-router-dom'
import axios from 'axios'
import './index.css'
import { Swiper } from 'react-vant';
import { items } from './demo/items';
import './demo/base.less'
export default function Index() {
	const navigate=useNavigate()
	let [type, setType] = useState([])
	let [list, setList] = useState([])
	let [y_type, setY_type] = useState('')
	let [tofb, setTofb] = useState(false)
	let [ind, setInd] = useState(-1)
	let [hei, sethei] = useState(false)
	const [is_hui,setIs_hui]=useState(false)
	const getType = () => {
		axios.get(`http://localhost:3000/type`).then(res => {
			let { code, data } = res.data
			setType(data)
		})
	}
	const getList = () => {
		let h = -1
		if (tofb == false) {
			h = 1
		} else {
			h = -1
		}
		axios.get(`http://localhost:3000/yi?y_type=${y_type}&tofb=${h}`).then(res => {
			let { code, data } = res.data
			setList(data)
		})
	}
	const search=()=>{
		sethei(true)
		setTofb(!tofb)
		getList()
	}
	const searcha=(_id)=>{
		setY_type(_id)
		getList()
	}
	useEffect(() => {
		getType()
		getList()
	}, [])
	return (
		<div>
			<nav className='ami'>
				<div className='header'>
					<span><b>Lativ诚衣</b></span>
					<span><span>···</span>&nbsp;&nbsp;|&nbsp;&nbsp;口</span>
				</div>
				<div className='jingb' onClick={()=>{navigate('/search')}}>
					🔍搜索商品
				</div>
				<div className='lou'>
					{type.map((item, index) => {
						return <div key={item._id} onClick={()=>{searcha(item._id)}}>
							{item.name}
						</div>
					})}
				</div>
				<div className='qwertyuiop'>
					<div style={{ fontSize: '20px' }}>综合</div>
					<div style={{ fontSize: '20px' }}>销量</div>
					<div style={{ fontSize: '20px' }}>新品</div>
					<div style={{ display: 'flex' }}><span style={{ fontSize: '20px' }} onClick={()=>{search()}}>价格</span>
						<span>
							<span>^</span><br/>
							<span>v</span>
						</span>
					</div>
					<div></div><div></div>
				</div>
				<div>
					<div className={hei==false?'':'no'}>
						<div className="demo-swiper">
							<Swiper autoplay={5000}>{items}</Swiper>
						</div>
					</div>
				</div>
				<nav>
					<div className='qwert'>
						{list.map((item,index)=>{
							return <nav key={item._id}>
								<img src={item.name} alt="" width='100%' height='150px'/>
								<br/>
								<p>{item.img}</p>
								<span>
									<span style={{color:'red',fontSize:'18px'}}>￥{item.price}</span>
								</span>
							</nav>
						})}
					</div>
				</nav>
				<div className={is_hui==false?'infodata':'no'}>

				</div>
				<div className='buts'>
						<div className='zhenzuil'>
						<span>首页</span>
						<span>分类</span>
						<span>购物车</span>
						<span>个人</span>
						</div>
				</div>
			</nav>

		</div>
	)
}
